<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <form>
        <input type="file" name="myfile" id="myfile" />
        <input type="button" value="提交" id="btn" />
    </form>
    <div>
        <img src="" id="imgs" />
    </div>
    <script>
        // 文件上传：把本地的图片选择到表单当中，下一步点击提交按钮，把文件数据提交服务器
        // 服务器收到文件内容后会放到一个指定的磁盘中，并且向客户端返回文件的url地址
        // 客户端收到url地址后，可以设置到img标签的src属性中，这样图片就可以展示出来
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            //获取文件内容
            var file = document.getElementById('myfile').files[0];
            // console.log(files);
            if (!file) {
                alert('请选择文件');
                return;
            }
            var fd = new FormData();
            //fd 将选中的文件添加到FormData
            fd.append('avatar', file);
            //avatar由后台借口规定  作用：后台通过该名称获得上传的文件信息
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');
            //处理文件上传
            // 需要基于FormData进行文件上传
            xhr.send(fd);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var ret = xhr.response;
                    //将字符串转为对象
                    var obj = JSON.parse(ret);
                    console.log(obj);
                    var imgs = document.getElementById('imgs');
                    imgs.setAttribute(
                        'src',
                        'http://www.liulongbin.top:3006' + obj.url
                    );
                }
            };
        };
    </script>
</body>

</html>